<template>
  <view class="padding-bottom-button">
    <l-background />
    <view class="padding-30">
      <view class="card padding-30">
        <l-title title="注销当前账号" />
        <view class="flex-column margin-top-30">
          <text class="text-30 color-t1">将{{ showPhone }}所绑定的账号注销</text>
          <text class="text-28 color-t3 margin-top-16 height">账号提交注销后，平台将对账号进行30天的审核，确保无交易和账单问题。如需继续使用账号，可重新登录账号选择取消注销。账号注销后我们将停止为您提供服务，您的历史数据将被清空且无法找回。如继续注销请仔细阅读以下规则。</text>
          <text class="text-30 color-t1 margin-top-30">注销后，您将放弃以下权益：</text>
          <view class="card sub-card padding-30 margin-top-16 flex-column">
            <text v-for="(item,index) in abandon" :key="index" class="text-28 color-t1 margin-top-20 info">{{ item }}</text>
          </view>
          <text class="text-30 color-t1 margin-top-30">需满足以下条件：</text>
          <view class="card sub-card padding-30 margin-top-16 flex-column">
            <text v-for="(item,index) in condition" :key="index" class="text-28 color-t1 margin-top-20 info">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="card margin-top-16 padding-top-30 padding-lr-10 padding-bottom-20">
        <view class="padding-lr-20">
          <l-title title="请选择注销原因" />
        </view>
        <view class="margin-top-20">
          <view v-for="item in withdrawList" :key="item.value" hover-class="card-hover" :hover-stay-time="70">
            <tui-list-cell :hover="false" unlined padding="10rpx 20rpx" @click="choose(item)">
              <l-check-box :value="item.checked" :label="item.label" size="50rpx" font-size="30rpx" />
            </tui-list-cell>
          </view>
        </view>
      </view>
    </view>
    <safe-area-bottom />
    <l-bottom-button text="同意并注销" @click="cancelAccount" />
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { cancellationJudgment } from '../api'
export default {
  name: 'CancelAccount',
  data() {
    return {
      abandon: [ // 放弃权益
        '1.您将无法登录和使用当前账号',
        '2.您添加的成员账号将无法登录企业',
        '3.您将无法查看客户的挂账记录'
      ],
      condition: [ // 满足条件
        '1.全部账单已结清',
        '2.历史交易订单无纠纷',
        '3.无未完成的平台订单',
        '4.无待开的发票'
      ],
      withdrawList: [// 注销原因
        { label: '存在数据安全和隐私顾虑', value: '存在数据安全和隐私顾虑', checked: false },
        { label: '存在纠纷无法解决', value: '存在纠纷无法解决', checked: false },
        { label: '功能不好用', value: '功能不好用', checked: false },
        { label: '其他原因', value: '其他原因', checked: false }
      ],
      withdraw: ''
    }
  },
  computed: {
    showPhone() {
      const phone = this.userInfo.phone || ''
      return phone ? phone.substring(0, 3) + '****' + phone.substring(7, 11) : phone
    },
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    choose(e) {
      e.checked = !e.checked
      const arr = []
      this.withdrawList.forEach(item => {
        if (item.checked) arr.push(item.value)
      })
      this.withdraw = arr.join(',')
    },
    async cancelAccount() {
      const [err, res] = await cancellationJudgment()
      if (!this.$http.errorCheck(err, res)) return false
      this.jump('/passport/set-phone/set-phone?cancel=1&withdraw=' + this.withdraw)
    }
  }
}
</script>

<style scoped lang="scss">
.card{
  border-radius:20rpx;
}
.sub-card{
  background:$color-background;
}
.height{
  line-height:1.8;
}
.info:first-child{
  margin:0;
}
</style>
